<template>
	<div class="commentitems">
		<!-- 二级评论 三级评论 -->
		<div class="commentitem" v-for="item in commentchild" :key="item.id">
			<div class="userImg" @click="postItemcomment(item.comment_id)">
				<p>
					<span v-if="item.userinfo" style="color: #478ef0;">{{ item.userinfo.name }}</span>
					<span v-else>此用户无姓名</span>
					<span>：</span>
					<span v-if="item.comment_content && !temp" class="comment-content">{{ item.comment_content }}</span>
					<span v-else>
						回复
						<span style="color: #478ef0;">{{ item.parent_user_info.name }}</span>
						:{{ item.comment_content }}
					</span>
				</p>
			</div>
			<commentchilditem :commentchild="item.child" @postchild="postchild" :temp="true"></commentchilditem>
		</div>
	</div>
</template>

<script>
export default {
	name: 'commentchilditem',
	props: ['commentchild', 'temp'],
	methods: {
		postItemcomment(id) {
			// 二级评论
			console.log(id);
			this.$emit('postchild', id);
			// this.$emit('postpublishtwo',id)
			this.$emit('postpublish', id);
		},
		postchild(id) {
			// 三级评论
			console.log('111');
			this.postItemcomment(id);
			this.$emit('postpublish', id);
		}
	}
};
</script>

<style lang="less" scoped>
.commentitems {
	.commentitem {
		display: flex;
		flex-direction: column;
		// width: 100%;
		.userImg {
			display: flex;
			// border:1px solid red;
			img {
				margin: 0 5px 10px 0;
			}
			p {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				color: #555;
				font-size: 13px;
				margin-bottom: 5px;
				flex: 1;
			}
		}
		.commentContent {
			position: relative;
			margin-bottom: 2.778vw;
			white-space: pre-wrap;
			word-break: break-word;
			// z-index: 100;
			.publish {
				font-size: 16px;
				position: absolute;
				right: 0;
				color: red;
				bottom: 12px;
			}
			.publishaa {
				position: absolute;
				right: 0;
				color: red;
			}
		}
	}
}

.comment-content {
	white-space: pre-wrap;
	word-break: break-word;
	// z-index: 100;
}
</style>
